<template>
  <div class="jlszbox">
    <div class="jlszboxleft">
      <!-- 背景 -->
      <img src="@/images/jlszbox.png" alt="" class="jlszbjimg" />
      <!-- 表格列表 -->
      <div class="liebox beautifulScroll">
        <div
          class="lieitem"
          :ref="'lbs' + item.id"
          :class="{
            lieitems: item.id % 2 === 0,
            lieitemac: mklbid === item.id
          }"
          v-for="item in mklbdata"
          :key="item.id"
          @click="mklbfn(item.id)"
        >
          <div class="lieitemid">{{ item.id }}</div>
          <div class="lieitemname">{{ item.name }}</div>
        </div>
      </div>
      <!-- 表格数据部署 -->
      <div class="lbkv" ref="kv">{{ kv }}</div>
      <div class="lbugv" ref="ugv">{{ ugv }}</div>
    </div>
    <div class="jlszboxright">
      <!-- 背景 -->
      <img src="@/images/jlszbox3.png" alt="" class="jlszbjimg3" />
      <!-- 输入框 -->
      <el-input
        v-for="item in mkroidata"
        :key="item"
        v-model="mkroi[item]"
        :ref="'mkroi' + item"
        placeholder="输入"
        :class="[
          'mkroi1',
          'mkroi' + item,
          { 'roi-error': mkroiError[item - 1] }
        ]"
        @focus="focusfn(item)"
      ></el-input>

      <div class="tool dgjtoolqdsss" @click="mkcheckRoi">
        <img src="@/images/qds.png" alt="" class="normal" />
        <img src="@/images/qdsac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 跳过 -->
    <div class="tool tigbox" @click="tgfn" v-show="tgshow">
      <img src="@/images/tg.png" alt="" class="normal" />
      <img src="@/images/tgac.png" alt="" class="active" />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      mkroiError: [false, false, false, false, false, false, false, false],
      mkroiErrorCount: 0,
      mkroiAnswer: [
        982.7, 984.8, 986.7, 984.4, 985.7, 984.86, 1114, 1158, 1201, 1188, 1187,
        1169.6, -8.575
      ],
      mkroidata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      mkroi: {},
      mklbdata: [
        {
          id: 1,
          name: '大焦点模式80KV、100mA、200ms、20mAs-1'
        },
        {
          id: 2,
          name: '大焦点模式80KV、100mA、200ms、20mAs-2'
        },
        {
          id: 3,
          name: '大焦点模式80KV、100mA、200ms、20mAs-3'
        },
        {
          id: 4,
          name: '大焦点模式80KV、100mA、200ms、20mAs-4'
        },
        {
          id: 5,
          name: '大焦点模式80KV、100mA、200ms、20mAs-5'
        },
        {
          id: 6,
          name: '大焦点模式80KV、200mA、100ms、20mAs-6'
        },
        {
          id: 7,
          name: '大焦点模式80KV、200mA、100ms、20mAs-7'
        },
        {
          id: 8,
          name: '大焦点模式80KV、200mA、100ms、20mAs-8'
        },
        {
          id: 9,
          name: '大焦点模式80KV、200mA、100ms、20mAs-9'
        },
        {
          id: 10,
          name: '大焦点模式80KV、200mA、100ms、20mAs-10'
        }
      ],
      mklbid: 0,
      kv: 60.13,
      ugv: 982.7,
      tgshow: true
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    mklbid: {
      handler(i, old) {
        if (old != 0) {
          this.$refs[`mkroi${old}`][0].$el.classList.remove('tymb')
        }
      },
      deep: true,
      immediate: true
    }
  },
  //方法集合
  methods: {
    focusfn(i) {
      this.$refs.ugv.classList.remove('tymb')
      this.$refs[`mkroi${i}`][0].$el.classList.remove('tymb')
      this.$emit('tiptextfn', '')
    },
    tgfn() {
      const { mkroidata, mkroiAnswer } = this

      // 遍历所有输入框对应的编号（mkroidata中的项）
      mkroidata.slice(0, mkroiAnswer.length).forEach((item, index) => {
        const answer = mkroiAnswer[index]
        // 核心逻辑：跳过编号能被5整除的输入框（item是输入框编号，如5、10、15...）
        if (item === 13) {
          return
        }

        // 只给有有效答案的输入框赋值，并用$set确保响应式
        if (answer !== null && answer !== undefined) {
          this.$set(this.mkroi, item, answer) // 关键修复：使用$set保证响应式
          console.log(`编号为${item}的输入框已赋值：${answer}`)
        }
      })

      this.tgshow = false
      this.$refs.ugv.classList.remove('tymb')
      this.$refs.mkroi1[0].$el.classList.remove('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      this.$emit('tiptextfn', '')
    },
    mklbfn(id) {
      this.mklbid = id
      this.$refs.ugv.classList.add('tymb')
      // this.$refs.mkroi1[0].$el.classList.add('tymb')

      this.$refs[`mkroi${id}`][0].$el.classList.add('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      // 正确示例：给组件根元素添加类

      // 或者给内部input元素添加类

      // 计算对应的组号（每6个id一组）
      const groupId = Math.floor((id - 1) / 5)

      // 计算在组内的位置（0-5）
      const positionInGroup = (id - 1) % 5

      // 计算在mkroiAnswer中的索引
      // 每组5个元素，只取前3个，所以每组起始索引是 groupId * 5
      const targetIndex = groupId * 6 + positionInGroup

      // 赋值（处理可能的索引越界）
      this.ugv = this.mkroiAnswer[targetIndex] ?? null
    },
    mkcheckRoi() {
      let hasError = false
      const errorArr = []
      const { mkroidata, mkroiAnswer, mkroiError } = this // 解构赋值简化访问

      // 边界检查：答案数组长度不足时补充默认值
      if (mkroiAnswer.length < mkroidata.length) {
        console.warn(
          `答案数组长度不足，已自动补充默认值。实际: ${mkroiAnswer.length}, 需要: ${mkroidata.length}`
        )
        // 补充默认值避免后续undefined判断
        while (mkroiAnswer.length < mkroidata.length) {
          mkroiAnswer.push(null)
        }
      }

      // 校验所有输入项
      mkroidata.forEach((item, index) => {
        const answer = mkroiAnswer[index]
        // 跳过无答案的项
        if (answer === null || answer === undefined) return

        const inputValue = Number(this.mkroi[item])
        const isError = inputValue !== answer

        this.$set(mkroiError, index, isError)

        if (isError) {
          hasError = true
          errorArr.push(index)
        }
      })

      if (hasError) {
        this.mkroiErrorCount++
        // 错误提示闪烁效果
        setTimeout(() => {
          errorArr.forEach((idx) => this.$set(mkroiError, idx, false))
        }, 400)

        // 三次错误后自动填充正确答案并跳转
        if (this.mkroiErrorCount >= 3) {
          this.tgshow = false
          // 只填充有答案的项
          mkroidata.slice(0, mkroiAnswer.length).forEach((item, i) => {
            if (mkroiAnswer[i] !== null && mkroiAnswer[i] !== undefined) {
              this.mkroi[item] = mkroiAnswer[i]
            }
          })

          // 使用箭头函数简化定时器
          setTimeout(() => {
            this.$emit('jlsfn')
          }, 2000)
        }
      } else {
        this.mkroiErrorCount = 0
        this.$emit('jlsfn')
      }
      this.$refs.ugv.classList.remove('tymb')
      this.$refs.mkroi1[0].$el.classList.remove('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      this.$emit('tiptextfn', '')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$refs.lbs1[0].classList.add('tymbs')
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
::v-deep .mkroi1 {
  position: absolute !important;
  left: 206px;
  top: 195.5px;
  width: 125px !important;
  background: #eeeeee;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(196, 195, 195, 0.795);
  font-size: 13px;

  /* transparent */
}
::v-deep .mkroi1 .el-input__inner {
  height: 40px !important;
  border: none !important;
  border-radius: 0px;
  background-color: transparent;
  color: #000000 !important;
  padding: 0px !important;
  padding-left: 5px !important;
}
::v-deep .roi-error .el-input__inner {
  color: red !important;
}
.mkroi2 {
  left: 206px;
  top: 247px;
}
.mkroi3 {
  left: 206px;
  top: 299px;
}
.mkroi4 {
  left: 206px;
  top: 350.5px;
}
.mkroi5 {
  left: 206px;
  top: 402px;
}
.mkroi6 {
  left: 206px;
  top: 454px;
}
.mkroi7 {
  left: 346px;
  top: 195.5px;
}
.mkroi8 {
  left: 346px;
  top: 247px;
}
.mkroi9 {
  left: 346px;
  top: 299px;
}
.mkroi10 {
  left: 346px;
  top: 350.5px;
}
.mkroi11 {
  left: 346px;
  top: 402px;
}
.mkroi12 {
  left: 346px;
  top: 454px;
}
.mkroi13 {
  left: 206px;
  top: 505px;
  width: 266px !important;
}

.liebox {
  position: absolute;
  width: 228px;
  height: 540px;
  top: 73px;
  left: 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.lieitem {
  width: 228px;
  height: 30px;
  background-color: #fff;
  display: flex;
  line-height: 30px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #cfcfcf;
}
.lieitems {
  background-color: #eff0f1;
}
.lieitemid {
  width: 31px;
  border-right: 1px solid #cfcfcf;
}
.lieitemname {
  padding-left: 10px;
  width: 180px;
  /* 修正文本装饰属性，dashed 不是 valid 值 */
  text-decoration: none; /* 或删除此行，默认无装饰 */

  /* 文本不换行 */
  white-space: nowrap;
  /* 超出容器部分隐藏 */
  overflow: hidden;
  /* 超出部分显示省略号 */
  text-overflow: ellipsis;
}
.lieitemid {
  font-weight: 700;
  text-align: center;
}
.lieitemac {
  color: #ffff;
  background-color: #48abff;
}
.lbkv {
  font-size: 34px;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 475px;
  top: 150px;
  text-align: center;
}
.tigbox {
  position: absolute;
  bottom: -40px;
}
.tigbox img {
  width: 140px;
  height: 53px;
}
.jlszbjimg3 {
  width: 505px;
  height: 651px;
}

.dgjtoolqdsss {
  cursor: pointer;
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translate(-50%, 0);
}
.dgjtoolqdsss img {
  width: 79px;
  height: 38px;
}
.lbugv {
  font-size: 34px;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 285px;
  top: 150px;
  text-align: center;
}
</style>
